<template>
   <div class="compontent">
        <div v-if="params.subLabel != undefined " class="title-part abs">
            <div class="name">{{params.label}}</div>
            <div class="sub-name">{{params.subLabel}}</div>
        </div>
        <div v-else class="select-label">{{params.label}}</div>
        <select name="" id="" class="cto-select" @change="onchange" v-bind:disabled="disabled">
            <option v-for="item in params.data" 
                    :value="item" 
                    v-bind:selected="typeof(defaultSelectCb) === 'function' ? defaultSelectCb(item):''"
                    >{{item}}</option>
        </select>
        <div class="arrow"></div>
   </div>
</template>

<script>
     import Store from '@/store/Store.js'
     export default{
        props:{
            params:{
                type:Object,
                default:function(){
                    return{
                        label:'',
                        subLabel:'',
                        data:[]
                    }
                }
            },
            disabled:Boolean,
            cb:{},
            defaultSelectCb:{}
        },
        methods:{
            onchange(e){
                let val = e.target.value;
                typeof(this.cb) === 'function' ? this.cb(val):()=>{}
            }
            
        }
    }
</script>

<style lang="less" scoped>
.compontent{
    width:100%;
    .select-label{
        position: absolute;
        top: 0;
        left: 0;
        font-size: 14px;
        color: #333;
        line-height: 44px;
        height: 44px;
    }
    .abs {
      position: absolute;
      top: 0;
      left: 0;
    }
    .title-part {
        top: 8px;
        .name {
            text-align: left;
            font-size: 14px;
            color: #666;
        }
        .sub-name {
          line-height: 20px;
          font-size: 12px;
          color: #999;
        }
    }
    
    .cto-select{
        width:fill-available;
        border: none;
        height: 44px;
        line-height: 44px;
        font-size: 12px;
        text-align: right;
        padding:0px 5px 0 0 ;
        background-color: transparent;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        direction: rtl;
        &::-webkit-input-placeholder { /* WebKit browsers */
            color: #d2d2d2;
        }
        &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #d2d2d2;
        }
        &::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #d2d2d2;
        }
        &:-ms-input-placeholder { /* Internet Explorer 10+ */
            color: #d2d2d2;
        }
      }
    }
</style>